<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); padding: 2rem;">
	<!-- playground-fold-end -->
	<div style="height: 300px">
		<ui5-timeline id="growingTimeline" layout="Vertical" growing="Scroll" loading-delay="0">
			<ui5-timeline-item title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova" name-clickable></ui5-timeline-item>
			<ui5-timeline-item title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova"></ui5-timeline-item>

			<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
				<ui5-label>MR SOF02 2.43</ui5-label>
			</ui5-timeline-item>

			<ui5-timeline-item title-text="Video Conference Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
				Online meeting
			</ui5-timeline-item>
		</ui5-timeline>
	</div>
	<!-- playground-fold -->
	<script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
